<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="热搜ID" prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="请输入热搜编号ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="热度值" prop="heatValue">
        <el-input
          v-model="queryParams.heatValue"
          placeholder="会大于该值的记录"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createdTime">
        <el-date-picker clearable
          v-model="queryParams.createdTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <!-- 优化后的清理导出按钮 -->
        <el-button 
          type="warning" 
          plain
          icon="FolderDelete" 
          @click="openCleanDialog"
          class="clean-export-btn"
        >
          <span>清理导出</span>
        </el-button>
        <el-dialog v-model="cleanDialogVisible" title="清理特定日期并导出" width="450px">
          <div class="clean-dialog-content">
            <div class="clean-dialog-icon">
              <el-icon size="48" color="#E6A23C">
                <FolderDelete />
              </el-icon>
            </div>
            <div class="clean-dialog-text">
              <p>此操作将清理指定天数前的历史数据并导出备份文件</p>
            </div>
            <el-form label-position="top">
              <el-form-item label="保留最近天数">
                <el-input-number 
                  v-model="cleanPeriod" 
                  :min="1" 
                  :max="365"
                  controls-position="right"
                  class="period-input"
                />
                <div class="period-tip">
                  <el-icon><InfoFilled /></el-icon>
                  <span>将保留最近 {{ cleanPeriod }} 天的数据，清理更早的记录</span>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="cleanDialogVisible = false">取消</el-button>
              <el-button type="warning" @click="handleCleanExport" class="confirm-clean-btn">
                <el-icon><FolderDelete /></el-icon>
                确认清理并导出
              </el-button>
            </div>
          </template>
        </el-dialog>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['topic:topic:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['topic:topic:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['topic:topic:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Download"
          @click="handleStartCrawlerImmediate"
          :loading="crawlerLoading && crawlerMode === 'immediate'"
          :disabled="crawlerRunning || immediateCrawlerRunning || scheduledCrawlerRunning"
          v-hasPermi="['topic:topic:crawler']"
        >立即爬取</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Clock"
          @click="handleStartCrawlerScheduled"
          :loading="crawlerLoading && crawlerMode === 'scheduled'"
          :disabled="crawlerRunning || immediateCrawlerRunning || scheduledCrawlerRunning"
          v-hasPermi="['topic:topic:crawler']"
        >定时爬取</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="CircleClose"
          @click="handleStopCrawler"
          :loading="stopCrawlerLoading"
          :disabled="!crawlerRunning && !immediateCrawlerRunning && !scheduledCrawlerRunning"
          v-hasPermi="['topic:topic:crawler']"
        >停止爬虫</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Setting"
          @click="handleConfigCrawler"
          v-hasPermi="['topic:topic:crawler']"
        >设置爬虫时间</el-button>
      </el-col>
      <el-col :span="6">
        <div class="crawler-schedule-info">
          <el-tag type="info" v-if="crawlerSchedule">爬虫定时执行时间: {{ formatScheduleTime(crawlerSchedule) }}</el-tag>
          <el-tag type="success" v-if="immediateCrawlerRunning" style="margin-left: 8px;">立即爬取中...</el-tag>
          <el-tag type="warning" v-if="scheduledCrawlerRunning" style="margin-left: 8px;">定时爬取运行中</el-tag>
        </div>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="topicList"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="热搜编号ID" align="center" prop="id" width="100" />
      <el-table-column label="热搜标题" align="center" prop="title" min-width="200" />
      <el-table-column
        prop="heatValue"
        label="热度值"
        align="center"
        width="120"
        sortable="custom"
        :class-name="sortClass('heatValue')"
      >
        <template #header>
          <span style="display: inline-flex; align-items: center; justify-content: center; width: 100%; white-space: nowrap;">
            热度值
            <el-icon style="margin-left: 4px; color: #bbb; font-size: 16px;">
              <Sort />
            </el-icon>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="原始链接" align="center" prop="originalUrl" width="280">
        <template #default="scope">
          <div class="url-cell">
            <el-tooltip :content="scope.row.originalUrl" placement="top">
              <span class="url-text">{{ truncateUrl(scope.row.originalUrl) }}</span>
            </el-tooltip>
            <el-button 
              type="primary" 
              size="small" 
              icon="CopyDocument" 
              @click="copyToClipboard(scope.row.originalUrl)"
              class="copy-btn"
              title="复制链接"
            ></el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createdTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['topic:topic:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['topic:topic:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改热搜主题对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="topicRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="热搜标题" prop="title">
          <el-input v-model="form.title" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="热度值" prop="heatValue">
          <el-input v-model="form.heatValue" placeholder="请输入热度值" />
        </el-form-item>
        <el-form-item label="原始链接" prop="originalUrl">
          <el-input v-model="form.originalUrl" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 爬虫配置对话框 -->
    <el-dialog title="爬虫定时配置" v-model="configDialogVisible" width="500px" append-to-body>
      <el-form ref="configFormRef" :model="configForm" :rules="configRules" label-width="100px">
        <el-form-item label="定时执行时间" prop="scheduleTime">
          <el-time-picker
            v-model="configForm.scheduleTimeObj"
            format="HH:mm"
            placeholder="选择时间"
            @change="handleTimeChange"
          ></el-time-picker>
          <div class="el-form-item-tip">每天将在此时间执行爬虫任务</div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitConfigForm">确 定</el-button>
          <el-button @click="cancelConfig">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Topic">
// 导入API函数
import { 
  listTopic, 
  getTopic, 
  delTopic, 
  addTopic, 
  updateTopic, 
  startCrawler, 
  stopCrawler, 
  getCrawlerStatus, 
  getCrawlerConfig, 
  updateCrawlerConfig,
  cleanAndExport
} from "@/api/topic/topic";
import { parseTime } from "@/utils/ruoyi";
import { ElMessage } from 'element-plus';
import { FolderDelete, InfoFilled, Sort } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance();

const topicList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const crawlerLoading = ref(false);
const stopCrawlerLoading = ref(false);
const crawlerRunning = ref(false);
const crawlerSchedule = ref("");
const cleanDialogVisible = ref(false);
const cleanPeriod = ref(7);

// 新增爬虫模式状态管理
const crawlerMode = ref(''); // 'immediate' | 'scheduled' | ''
const immediateCrawlerRunning = ref(false); // 立即爬取运行状态
const scheduledCrawlerRunning = ref(false); // 定时爬取运行状态

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: null,
    topicCode: null,
    title: null,
    heatValue: null,
    originalUrl: null,
    createdTime: null,
    
  },
  rules: {
    title: [
      { required: true, message: "热搜标题不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 截断URL显示 */
function truncateUrl(url) {
  if (!url) return '';
  const maxLength = 40;
  if (url.length <= maxLength) {
    return url;
  }
  return url.substring(0, maxLength) + '...';
}

/** 复制到剪贴板 */
async function copyToClipboard(text) {
  try {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(text);
      proxy.$modal.msgSuccess("链接已复制到剪贴板");
    } else {
      // 兼容老版本浏览器
      const textArea = document.createElement('textarea');
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      proxy.$modal.msgSuccess("链接已复制到剪贴板");
    }
  } catch (err) {
    console.error('复制失败:', err);
    proxy.$modal.msgError("复制失败，请手动复制");
    // 可以在这里添加一个输入框让用户手动复制
    proxy.$modal.alert(text, '复制链接', {
      confirmButtonText: '确定',
      showClose: false
    });
  }
}

/** 查询热搜主题列表 */
function getList() {
  loading.value = true;
  listTopic(queryParams.value).then(response => {
    topicList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    topicCode: null,
    title: null,
    heatValue: null,
    originalUrl: null,
    createdTime: null,
    delFlag: null
  };
  proxy.resetForm("topicRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加热搜主题";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getTopic(_id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改热搜主题";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["topicRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateTopic(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addTopic(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除热搜主题编号为"' + _ids + '"的数据项？').then(function() {
    return delTopic(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

// 在页面加载时获取爬虫状态
function checkCrawlerStatus() {
  getCrawlerStatus().then(response => {
    const isRunning = response.data;
    crawlerRunning.value = isRunning;
    
    // 如果爬虫正在运行，但没有设置模式，默认为定时模式
    if (isRunning && !crawlerMode.value) {
      scheduledCrawlerRunning.value = true;
      crawlerMode.value = 'scheduled';
    }
    
    // 如果爬虫已停止，重置所有状态
    if (!isRunning) {
      immediateCrawlerRunning.value = false;
      scheduledCrawlerRunning.value = false;
      crawlerMode.value = '';
    }
  }).catch(() => {
    crawlerRunning.value = false;
    immediateCrawlerRunning.value = false;
    scheduledCrawlerRunning.value = false;
    crawlerMode.value = '';
  });
}

/** 立即爬取按钮操作 */
function handleStartCrawlerImmediate() {
  crawlerLoading.value = true;
  crawlerMode.value = 'immediate';
  immediateCrawlerRunning.value = true;
  
  proxy.$modal.confirm('确认立即执行百度热搜爬虫？爬虫将立即开始爬取，完成后自动停止。').then(function() {
    return startCrawler(true); // 立即执行模式
  }).then(response => {
    proxy.$modal.msgSuccess("爬虫已启动，正在立即执行爬取任务！");
    crawlerLoading.value = false;
    
    // 立即执行模式：设置一个定时器来检查爬虫是否完成
    const checkInterval = setInterval(() => {
      getCrawlerStatus().then(statusResponse => {
        // 如果爬虫已经停止，说明立即执行完成
        if (!statusResponse.data) {
          clearInterval(checkInterval);
          immediateCrawlerRunning.value = false;
          crawlerMode.value = '';
          proxy.$modal.msgSuccess("立即爬取任务已完成！");
          getList(); // 刷新列表
        }
      }).catch(() => {
        // 如果获取状态失败，也认为爬虫已完成
        clearInterval(checkInterval);
        immediateCrawlerRunning.value = false;
        crawlerMode.value = '';
        getList(); // 刷新列表
      });
    }, 2000); // 每2秒检查一次状态
    
    // 设置最大等待时间（5分钟），防止无限等待
    setTimeout(() => {
      clearInterval(checkInterval);
      immediateCrawlerRunning.value = false;
      crawlerMode.value = '';
      proxy.$modal.msgWarning("立即爬取任务可能已完成，请检查数据");
      getList();
    }, 300000);
    
  }).catch(() => {
    crawlerLoading.value = false;
    immediateCrawlerRunning.value = false;
    crawlerMode.value = '';
  });
}

/** 定时爬取按钮操作 */
function handleStartCrawlerScheduled() {
  crawlerLoading.value = true;
  crawlerMode.value = 'scheduled';
  
  proxy.$modal.confirm('确认启动百度热搜爬虫？爬虫将在后台持续运行，按照预定时间执行爬取任务，直到手动停止。').then(function() {
    return startCrawler(false); // 定时任务模式
  }).then(response => {
    proxy.$modal.msgSuccess("爬虫已在后台启动，将按照预定时间执行爬取任务！");
    crawlerLoading.value = false;
    crawlerRunning.value = true; // 设置爬虫运行状态
    scheduledCrawlerRunning.value = true; // 设置定时爬取运行状态
    
    // 启动成功后刷新列表
    setTimeout(() => {
      getList();
    }, 2000);
  }).catch(() => {
    crawlerLoading.value = false;
    crawlerMode.value = '';
  });
}

/** 停止爬虫按钮操作 */
function handleStopCrawler() {
  stopCrawlerLoading.value = true;
  
  const stopMessage = crawlerMode.value === 'immediate' 
    ? '确认停止立即爬取任务？' 
    : '确认停止百度热搜爬虫？停止后将不再按预定时间执行爬取任务。';
    
  proxy.$modal.confirm(stopMessage).then(function() {
    return stopCrawler();
  }).then(response => {
    proxy.$modal.msgSuccess("爬虫已停止！" + (response.msg || ""));
    stopCrawlerLoading.value = false;
    
    // 重置所有爬虫状态
    crawlerRunning.value = false;
    immediateCrawlerRunning.value = false;
    scheduledCrawlerRunning.value = false;
    crawlerMode.value = '';
    
  }).catch(error => {
    proxy.$modal.msgError("停止爬虫失败：" + (error.message || "未知错误"));
    stopCrawlerLoading.value = false;
  });
}

// 格式化爬虫定时时间显示
function formatScheduleTime(schedule) {
  try {
    // 处理格式如 ['18:11'] 的字符串
    return schedule.replace(/\[|\]|'|"/g, "").trim();
  } catch (error) {
    return schedule;
  }
}

// 获取爬虫配置信息
function getCrawlerConfigInfo() {
  getCrawlerConfig().then(response => {
    if (response.code === 200 && response.data) {
      crawlerSchedule.value = response.data;
    }
  }).catch(() => {
    crawlerSchedule.value = "";
  });
}

// 添加新的响应式变量
const configDialogVisible = ref(false);
const configForm = ref({
  scheduleTime: '',
  scheduleTimeObj: null
});
const configRules = {
  scheduleTime: [
    { required: true, message: "定时执行时间不能为空", trigger: "blur" }
  ]
};

/** 打开爬虫配置对话框 */
function handleConfigCrawler() {
  configDialogVisible.value = true;
  // 获取当前配置并填充表单
  getCrawlerConfig().then(response => {
    if (response.code === 200 && response.data) {
      const timeStr = formatScheduleTime(response.data);
      configForm.value.scheduleTime = timeStr;
      
      // 转换为时间对象
      if (timeStr) {
        const [hours, minutes] = timeStr.split(':');
        const date = new Date();
        date.setHours(parseInt(hours));
        date.setMinutes(parseInt(minutes));
        configForm.value.scheduleTimeObj = date;
      }
    }
  });
}

/** 时间选择器变更事件 */
function handleTimeChange(time) {
  if (time) {
    const hours = time.getHours().toString().padStart(2, '0');
    const minutes = time.getMinutes().toString().padStart(2, '0');
    configForm.value.scheduleTime = `${hours}:${minutes}`;
  } else {
    configForm.value.scheduleTime = '';
  }
}

/** 取消配置 */
function cancelConfig() {
  configDialogVisible.value = false;
  configForm.value = {
    scheduleTime: '',
    scheduleTimeObj: null
  };
}

/** 提交配置表单 */
function submitConfigForm() {
  if (!configForm.value.scheduleTime) {
    proxy.$modal.msgError("请选择定时执行时间");
    return;
  }
  
  updateCrawlerConfig({ scheduleTime: configForm.value.scheduleTime }).then(response => {
    proxy.$modal.msgSuccess("爬虫定时配置已更新");
    configDialogVisible.value = false;
    // 刷新显示的配置信息
    getCrawlerConfigInfo();
  }).catch(error => {
    proxy.$modal.msgError("更新配置失败：" + (error.message || "未知错误"));
  });
}

/** 打开清理导出对话框 */
function openCleanDialog() {
  cleanDialogVisible.value = true;
}

/** 处理清理导出 */
async function handleCleanExport() {
  try {
    const response = await cleanAndExport(cleanPeriod.value);
    if (response.code === 200) {
      ElMessage.success('清理与导出成功！');
      cleanDialogVisible.value = false;
      // 刷新列表
      getList();
    } else {
      ElMessage.error(response.msg || '操作失败');
    }
  } catch (e) {
    console.error('清理导出失败:', e);
    ElMessage.error('操作失败：' + (e.message || '未知错误'));
  }
}

// 在<script setup>中添加排序处理方法
function handleSortChange({ prop, order }) {
  if (prop === 'heatValue') {
    queryParams.value.orderByColumn = prop;
    queryParams.value.isAsc = order === 'ascending' ? 'asc' : 'desc';
    getList();
  }
}

// 在<script setup>中添加sortClass方法
function sortClass(prop) {
  return queryParams.value.orderByColumn === prop ? 'sorted-column' : '';
}

// 初始化
getList();
checkCrawlerStatus(); // 获取爬虫状态
getCrawlerConfigInfo(); // 获取爬虫配置信息
</script>

<style scoped>
.crawler-schedule-info {
  display: flex;
  align-items: center;
  height: 100%;
}

.el-form-item-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.url-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.url-text {
  flex: 1;
  font-size: 13px;
  color: #606266;
  cursor: pointer;
  word-break: break-all;
}

.copy-btn {
  flex-shrink: 0;
  padding: 2px 4px;
  min-height: 24px;
  font-size: 12px;
}

.copy-btn:hover {
  background-color: #409eff;
  border-color: #409eff;
}

/* 清理导出按钮样式优化 */
.clean-export-btn {
  background: linear-gradient(135deg, #fef7e0 0%, #fdf2cc 100%);
  border: 1px solid #e6a23c;
  color: #b88230;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(230, 162, 60, 0.1);
}

.clean-export-btn:hover {
  background: linear-gradient(135deg, #fef4d9 0%, #fceabb 100%);
  border-color: #cf9236;
  color: #a6792b;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(230, 162, 60, 0.2);
}

.clean-export-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(230, 162, 60, 0.15);
}

/* 清理对话框样式优化 */
.clean-dialog-content {
  text-align: center;
  padding: 20px 0;
}

.clean-dialog-icon {
  margin-bottom: 16px;
}

.clean-dialog-text {
  margin-bottom: 24px;
}

.clean-dialog-text p {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.period-input {
  width: 100%;
}

.period-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #f4f4f5;
  border-radius: 4px;
  font-size: 12px;
  color: #909399;
}

.period-tip .el-icon {
  color: #e6a23c;
  flex-shrink: 0;
}

.confirm-clean-btn {
  background: linear-gradient(135deg, #e6a23c 0%, #d19e3a 100%);
  border: none;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(230, 162, 60, 0.3);
}

.confirm-clean-btn:hover {
  background: linear-gradient(135deg, #cf9236 0%, #b8862f 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230, 162, 60, 0.4);
}

.confirm-clean-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(230, 162, 60, 0.35);
}

.confirm-clean-btn .el-icon {
  margin-right: 4px;
}

.sorted-column .cell {
  background: #f5f7fa;
  color: #409EFF;
  font-weight: bold;
}
</style>